<template>
    <div id="box">
        <a-space wrap>
            <div :id="`main-${i}`" v-for="i in 16"></div>
        </a-space>
    </div>
</template>

<script setup>
import { onMounted,ref } from 'vue';
import * as echarts from 'echarts';
import {getCpuLoad} from '@/api/cpu/cpu';


onMounted(() => {
    getCpuLoadData();
})

/**
 * cpu核心负载数据 Array(16)
 */
const cpuLoadData = ref([])
/**
 * 获取cpu负载
 */
const getCpuLoadData = async () => {
        let resp = await getCpuLoad()
        let data = resp.data
        for (let i = 0; i < 16; i++) {
            // 判断是否为空
            if(!cpuLoadData.value[i]){
                // 初始化每一个cpu核心的数据为空数组,否则会报错
                cpuLoadData.value[i] = []
            }
            cpuLoadData.value[i].push(data[i])
            loadCharts(i+1,cpuLoadData.value[i])
        }
        await getCpuLoadData()
}

/**
 * 加载图表
 */
const loadCharts = (cpuIndex,cpuLoad) => {
    // console.log(cpuLoad + ' ' + cpuIndex)
    var chartDom = document.getElementById('main-'+cpuIndex);
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        title:{
            show: true,
            text: 'Core'+cpuIndex
        },
        grid:{left:0,right:0,top:60,bottom:60},
        xAxis: {
            show: false,
            type: 'category',
        },
        yAxis: {
            show: false,
            type: 'value',
        },
        series: [
            {
                data: cpuLoad,
                type: 'line',
                areaStyle:{
                    
                },
                symbol:'none'
             }
        ]
    };

    myChart.setOption(option);

}
</script>

<style scoped>
#box{
    margin: 0 auto;
}
/**给每个id为main开头的div元素添加样式 */
div[id^="main"]{
    border: 1px solid #ccc;
    margin-left: 20px;
    margin-top: 20px;
    width: 180px;height: 180px;
}
</style>